import React from 'react';
import './index.css';
import TopicItem from '../TopicItem';
import { Spin } from 'antd';

interface IProps {
  list: ITopic[];
}

const TopicList: React.FunctionComponent<IProps> = ({ list }) => {
  return (
    <div className="topic-list">
      {list.length > 0 ? (
        list.map((item) => {
          return <TopicItem {...item} key={item.id} />;
        })
      ) : (
        <Spin
          className="loading"
          style={{
            height: '72vh',
          }}
        />
      )}
    </div>
  );
};

export default TopicList;
